<?php
require_once "lib/init.php";
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>Time Tracking</title>
  
  <link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.20.custom.css">
  <link rel="stylesheet" href="css/styles.css">
  
  <script src="js/jquery.min.js"></script>
  <script src="js/jquery-ui.custom.min.js"></script>
  
  <script src="js/jquery.form.js"></script>
  
  <script src="js/Flipify.js" type="text/javascript" charset="utf-8"></script>
  <script src="js/date_format.js" type="text/javascript" charset="utf-8"></script>
  <script src="js/functions.js" type="text/javascript" charset="utf-8"></script>

  <script type="text/javascript" src="js/jquery.blockUI.js"></script>
  <script type="text/javascript" src="js/chili-1.7.pack.js"></script>

  </head>
  <body>
	<script>
    
	$(function() {

        var _tasks = {
            'project 0':{
                'module 0.1':['task 0.1.1','task 0.1.2','task 0.1.3','task 0.1.4'],
                'module 0.2':['task 0.2.1','task 0.2.2','task 0.2.3','task 0.2.4'],
                'module 0.3':['task 0.3.1','task 0.3.2','task 0.3.3','task 0.3.4'],
                'module 0.4':['task 0.4.1','task 0.4.2','task 0.4.3','task 0.4.4'],
                'module 0.5':['task 0.5.1','task 0.5.2','task 0.5.3','task 0.5.4'],
            },
            'project 1':{
                'module 1.1':['task 1.1.1','task 1.1.2','task 1.1.3','task 1.1.4'],
                'module 1.2':['task 1.2.1','task 1.2.2','task 1.2.3','task 1.2.4'],
                'module 1.3':['task 1.3.1','task 1.3.2','task 1.3.3','task 1.3.4'],
                'module 1.4':['task 1.4.1','task 1.4.2','task 1.4.3','task 1.4.4'],
                'module 1.5':['task 1.5.1','task 1.5.2','task 1.5.3','task 1.5.4'],
            },
            'project 2':{
                'module 2.1':['task 2.1.1','task 2.1.2','task 2.1.3','task 2.1.4'],
                'module 2.2':['task 2.2.1','task 2.2.2','task 2.2.3','task 2.2.4'],
                'module 2.3':['task 2.3.1','task 2.3.2','task 2.3.3','task 2.3.4'],
                'module 2.4':['task 2.4.1','task 2.4.2','task 2.4.3','task 2.4.4'],
                'module 2.5':['task 2.5.1','task 2.5.2','task 2.5.3','task 2.5.4'],
            }            
        }
         
        var _projects=[];
        var _modules = {};
        for(p in _tasks){
            _projects.push(p);
            
            var _m = [];
            for( m in _tasks[p]){
                _m.push(m);
            } 
            _modules[p] = _m;
        }    

        
		function split( val ) {
			return val.split( /\/\s*/ );
		}
		function extractLast( term ) {
			return split( term ).pop();
		}

		$( "#tags" )
			// don't navigate away from the field on tab when selecting an item
			.bind( "keydown", function( event ) {
				if ( event.keyCode === $.ui.keyCode.TAB && $( this ).data( "autocomplete" ).menu.active ) {
					event.preventDefault();
				}
			})
			.autocomplete({
				minLength: 0,
				source: function( request, response ) {
					// delegate back to autocomplete, but extract the last term
                    var _items = split(request.term);
                    var _data;
                  
                    switch(_items.length){
                        case 1:
                            _data = _projects;
                            break;
                        case 2:
                            _data = _modules[_items.shift().trim()];
                            break;
                        default:
                            _data = _tasks[_items.shift().trim()][_items.shift().trim()];
                            break;                            
                    }
                    // si es uno  => complentando proyecto
                    // si es dos => completar modulo
                    // si es mayor dos => completar tarea
                    if(!_data)_data=[];
                    
					response( $.ui.autocomplete.filter( _data, extractLast( request.term ) ) );
				},
				focus: function() {
					// prevent value inserted on focus
					return false;
				},
				select: function( event, ui ) {
					var terms = split( this.value );
					// remove the current input
					terms.pop();
					// add the selected item
					terms.push( ui.item.value );
					// add placeholder to get the comma-and-space at the end
					if(terms.length<3)terms.push( "" );
					this.value = terms.join( "/" );
					return false;
				}
			});
	});
	</script>



<div class="demo">

<div class="ui-widget">
	<label for="tags">Tag programming languages: </label>
	<input id="tags" size="50" />
</div>

</div>




  </body>
</html>
